<template>
  <div class="reports-page">
    <div class="page-header">
      <h2>报表统计</h2>
      <div class="date-filter">
        <select v-model="selectedPeriod" class="period-select">
          <option value="today">今日</option>
          <option value="week">本周</option>
          <option value="month">本月</option>
          <option value="quarter">本季度</option>
          <option value="year">本年</option>
        </select>
        <button @click="exportReport" class="export-btn">导出报表</button>
      </div>
    </div>

    <!-- 关键指标 -->
    <div class="key-metrics">
      <div class="metric-card">
        <div class="metric-icon">💰</div>
        <div class="metric-content">
          <div class="metric-value">¥{{ totalSales.toFixed(2) }}</div>
          <div class="metric-label">总销售额</div>
          <div class="metric-change" :class="salesChange >= 0 ? 'positive' : 'negative'">
            {{ salesChange >= 0 ? '+' : '' }}{{ salesChange.toFixed(1) }}%
          </div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon">📦</div>
        <div class="metric-content">
          <div class="metric-value">{{ totalOrders }}</div>
          <div class="metric-label">订单数量</div>
          <div class="metric-change" :class="ordersChange >= 0 ? 'positive' : 'negative'">
            {{ ordersChange >= 0 ? '+' : '' }}{{ ordersChange.toFixed(1) }}%
          </div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon">👥</div>
        <div class="metric-content">
          <div class="metric-value">{{ totalCustomers }}</div>
          <div class="metric-label">客户数量</div>
          <div class="metric-change" :class="customersChange >= 0 ? 'positive' : 'negative'">
            {{ customersChange >= 0 ? '+' : '' }}{{ customersChange.toFixed(1) }}%
          </div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon">📊</div>
        <div class="metric-content">
          <div class="metric-value">¥{{ averageOrder.toFixed(2) }}</div>
          <div class="metric-label">平均订单金额</div>
          <div class="metric-change" :class="averageChange >= 0 ? 'positive' : 'negative'">
            {{ averageChange >= 0 ? '+' : '' }}{{ averageChange.toFixed(1) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <h3>销售趋势</h3>
        <div class="chart-placeholder">
          <div class="chart-mock">
            <div class="chart-bars">
              <div class="bar" style="height: 60%"></div>
              <div class="bar" style="height: 80%"></div>
              <div class="bar" style="height: 45%"></div>
              <div class="bar" style="height: 90%"></div>
              <div class="bar" style="height: 70%"></div>
              <div class="bar" style="height: 85%"></div>
              <div class="bar" style="height: 95%"></div>
            </div>
            <div class="chart-labels">
              <span>周一</span>
              <span>周二</span>
              <span>周三</span>
              <span>周四</span>
              <span>周五</span>
              <span>周六</span>
              <span>周日</span>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-container">
        <h3>商品销售排行</h3>
        <div class="product-ranking">
          <div v-for="(product, index) in topProducts" :key="product.id" class="ranking-item">
            <div class="ranking-number">{{ index + 1 }}</div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-sales">销量：{{ product.sales }} 件</div>
            </div>
            <div class="product-revenue">¥{{ product.revenue.toFixed(2) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="data-section">
      <div class="section-header">
        <h3>销售明细</h3>
        <div class="table-filters">
          <select v-model="paymentFilter" class="filter-select">
            <option value="">全部支付方式</option>
            <option value="cash">现金</option>
            <option value="wechat">微信</option>
            <option value="alipay">支付宝</option>
            <option value="card">银行卡</option>
          </select>
        </div>
      </div>
      
      <div class="data-table">
        <table>
          <thead>
            <tr>
              <th>订单号</th>
              <th>时间</th>
              <th>商品</th>
              <th>数量</th>
              <th>金额</th>
              <th>支付方式</th>
              <th>收银员</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in filteredOrders" :key="order.id">
              <td>{{ order.orderNumber }}</td>
              <td>{{ formatDateTime(order.time) }}</td>
              <td>{{ order.items.join(', ') }}</td>
              <td>{{ order.quantity }}</td>
              <td>¥{{ order.amount.toFixed(2) }}</td>
              <td>
                <span class="payment-badge" :class="order.paymentMethod">
                  {{ getPaymentText(order.paymentMethod) }}
                </span>
              </td>
              <td>{{ order.cashier }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 利润分析 -->
    <div class="profit-section">
      <h3>利润分析</h3>
      <div class="profit-metrics">
        <div class="profit-card">
          <div class="profit-label">总收入</div>
          <div class="profit-value income">¥{{ totalRevenue.toFixed(2) }}</div>
        </div>
        <div class="profit-card">
          <div class="profit-label">总成本</div>
          <div class="profit-value cost">¥{{ totalCost.toFixed(2) }}</div>
        </div>
        <div class="profit-card">
          <div class="profit-label">毛利润</div>
          <div class="profit-value profit">¥{{ grossProfit.toFixed(2) }}</div>
        </div>
        <div class="profit-card">
          <div class="profit-label">利润率</div>
          <div class="profit-value rate">{{ profitRate.toFixed(1) }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const selectedPeriod = ref('week')
const paymentFilter = ref('')

// 模拟销售数据
const salesData = ref({
  totalSales: 12580.50,
  totalOrders: 156,
  totalCustomers: 89,
  averageOrder: 80.64,
  salesChange: 12.5,
  ordersChange: 8.3,
  customersChange: -2.1,
  averageChange: 3.8
})

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: 'ORD001',
    time: '2024-01-15 14:30:25',
    items: ['可口可乐', '薯片'],
    quantity: 2,
    amount: 12.50,
    paymentMethod: 'wechat',
    cashier: '张三'
  },
  {
    id: 2,
    orderNumber: 'ORD002',
    time: '2024-01-15 14:25:18',
    items: ['百事可乐', '红牛'],
    quantity: 2,
    amount: 10.00,
    paymentMethod: 'alipay',
    cashier: '李四'
  },
  {
    id: 3,
    orderNumber: 'ORD003',
    time: '2024-01-15 14:20:45',
    items: ['雪碧', '脉动', '农夫山泉'],
    quantity: 3,
    amount: 9.50,
    paymentMethod: 'cash',
    cashier: '张三'
  },
  {
    id: 4,
    orderNumber: 'ORD004',
    time: '2024-01-15 14:15:30',
    items: ['芬达', '康师傅绿茶'],
    quantity: 2,
    amount: 6.50,
    paymentMethod: 'card',
    cashier: '王五'
  },
  {
    id: 5,
    orderNumber: 'ORD005',
    time: '2024-01-15 14:10:15',
    items: ['红牛', '脉动', '薯片'],
    quantity: 3,
    amount: 19.00,
    paymentMethod: 'wechat',
    cashier: '李四'
  }
])

// 模拟热销商品数据
const topProducts = ref([
  { id: 1, name: '可口可乐 330ml', sales: 45, revenue: 157.50 },
  { id: 2, name: '百事可乐 330ml', sales: 38, revenue: 133.00 },
  { id: 3, name: '雪碧 330ml', sales: 32, revenue: 96.00 },
  { id: 4, name: '红牛 250ml', sales: 28, revenue: 182.00 },
  { id: 5, name: '脉动 600ml', sales: 25, revenue: 112.50 }
])

// 计算属性
const totalSales = computed(() => salesData.value.totalSales)
const totalOrders = computed(() => salesData.value.totalOrders)
const totalCustomers = computed(() => salesData.value.totalCustomers)
const averageOrder = computed(() => salesData.value.averageOrder)
const salesChange = computed(() => salesData.value.salesChange)
const ordersChange = computed(() => salesData.value.ordersChange)
const customersChange = computed(() => salesData.value.customersChange)
const averageChange = computed(() => salesData.value.averageChange)

const filteredOrders = computed(() => {
  let filtered = orders.value
  
  if (paymentFilter.value) {
    filtered = filtered.filter(order => order.paymentMethod === paymentFilter.value)
  }
  
  return filtered
})

const totalRevenue = computed(() => orders.value.reduce((sum, order) => sum + order.amount, 0))
const totalCost = computed(() => totalRevenue.value * 0.6) // 假设成本为收入的60%
const grossProfit = computed(() => totalRevenue.value - totalCost.value)
const profitRate = computed(() => (grossProfit.value / totalRevenue.value) * 100)

// 方法
const exportReport = () => {
  alert('报表导出功能开发中...')
}

const formatDateTime = (dateTimeString) => {
  return new Date(dateTimeString).toLocaleString('zh-CN')
}

const getPaymentText = (method) => {
  const methods = {
    cash: '现金',
    wechat: '微信',
    alipay: '支付宝',
    card: '银行卡'
  }
  return methods[method] || method
}
</script>

<style scoped>
.reports-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.date-filter {
  display: flex;
  gap: 12px;
  align-items: center;
}

.period-select {
  padding: 8px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: white;
}

.export-btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* 关键指标 */
.key-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.metric-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  font-size: 36px;
  margin-right: 16px;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.metric-change {
  font-size: 12px;
  font-weight: 600;
}

.metric-change.positive {
  color: #67c23a;
}

.metric-change.negative {
  color: #f56c6c;
}

/* 图表区域 */
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chart-bars {
  display: flex;
  align-items: end;
  gap: 20px;
  height: 200px;
  margin-bottom: 20px;
}

.bar {
  width: 30px;
  background: linear-gradient(to top, #409eff, #67c23a);
  border-radius: 4px 4px 0 0;
  min-height: 20px;
}

.chart-labels {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: #606266;
}

.chart-labels span {
  width: 30px;
  text-align: center;
}

/* 商品排行 */
.product-ranking {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

.ranking-number {
  width: 32px;
  height: 32px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 12px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.product-sales {
  font-size: 12px;
  color: #606266;
}

.product-revenue {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
}

/* 数据表格 */
.data-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.filter-select {
  padding: 8px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: white;
}

.data-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background: #fafafa;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.payment-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.payment-badge.cash {
  background: #67c23a;
}

.payment-badge.wechat {
  background: #07c160;
}

.payment-badge.alipay {
  background: #1677ff;
}

.payment-badge.card {
  background: #e6a23c;
}

/* 利润分析 */
.profit-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profit-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.profit-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.profit-card {
  text-align: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.profit-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.profit-value {
  font-size: 24px;
  font-weight: 700;
}

.profit-value.income {
  color: #67c23a;
}

.profit-value.cost {
  color: #f56c6c;
}

.profit-value.profit {
  color: #409eff;
}

.profit-value.rate {
  color: #e6a23c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .reports-page {
    padding: 15px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .date-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .key-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .profit-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .data-table {
    overflow-x: auto;
  }
  
  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .key-metrics {
    grid-template-columns: 1fr;
  }
  
  .profit-metrics {
    grid-template-columns: 1fr;
  }
}
</style> 